<template>
	<view class="page">
		<view class="login-form">
			<view class="login-title">账号注册</view>
			<uni-forms style="margin-top: 50px;" :modelValue="loginForm" :rules="rules" validate-trigger="blur">
				<uni-forms-item name="userName">
					<uni-easyinput type="number" v-model="loginForm.userName" placeholder="请输入手机账号" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="loginForm.password" placeholder="请输入登录密码" />
				</uni-forms-item>
        <uni-forms-item name="googlecode">
        	<uni-easyinput type="number" v-model="loginForm.googlecode" placeholder="谷歌验证码 - 未开启请忽略" />
        </uni-forms-item>
        <uni-forms-item name="code" style="position: relative;">
        	<uni-easyinput type="number" v-model="loginForm.code" placeholder="请输入图形验证码" />
          <!-- 生成验证码-->
          <view style="position: absolute;right: 0;top: 0;">
            <jp-verification-literalness :contentHeight="30" :contentWidth="80" :lineLength="30"  :securityCode="securityCode" @getCode="getCode"></jp-verification-literalness>
          </view>
        </uni-forms-item>

				<view class="loginCon">
					<text @click="goRegister">立即注册</text>
					<text @click="resetPWD">忘记密码?</text>
				</view>  
        
				<button @click="submit" type="primary">登录</button>
			</uni-forms>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        securityCode: '',
				loginForm: {
					terminal: 1, // APP终端
					userName: '',
					password: '',
          googlecode: "",
          code: ''
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					googlecode: {
						rules: [{
							required: true,
							errorMessage: '请输入谷歌验证码',
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入图像验证码',
						}]
					}
				}
			}
		},
		methods: {
      getRandomFourDigitNumber() {
          // 生成一个0到9999之间的随机整数
          const randomNum = Math.floor(Math.random() * 10000);
          
          // 确保生成的数字是四位数（即1000到9999之间）
          // 由于Math.random() * 10000生成的数包含0到9999，所以我们需要排除0到999
          if (randomNum < 1000) {
              return '1369'; // 递归调用直到生成有效的四位数
          }
          
          return randomNum+"";
      },
      getCode(code) {
        console.log(code);
        this.securityCode =  this.getRandomFourDigitNumber();
      },
			submit() {
        console.log(this.securityCode);
        
        return
        uni.switchTab({
        	url: "/pages/chat/chat"
        })
        
				this.$httpRequest({
					url: '/login',
					data: this.loginForm,
					method: 'POST'
				}).then(loginInfo => {
					console.log("登录成功,自动跳转到聊天页面...", loginInfo);
					loginInfo.data.expireTime = new Date().getTime() + loginInfo.data.refreshTokenExpiresIn * 1000;
					// 调用App.vue的初始化方法
					getApp().init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				})
			},
			goRegister() {
				uni.navigateTo({
					url: 'register/register',
				});
			},
			resetPWD() {
				uni.navigateTo({
					url: 'resetPWD/resetPWD',
				});
			}
		},

		onLoad() {
      this.securityCode =  this.getRandomFourDigitNumber();  
		}
	}
</script>

<style lang="scss" scoped>
  .page {
    background-color: white;
  }
	.login-form {
		margin: 60rpx;

		.login-title {
      color: rgb(3, 8, 26);
      font-family: HarmonyOS Sans SC;
      font-size: 35rpx;
			margin-top: 100rpx;
			margin-bottom: 100rpx;
			font-weight: 800;
		}

		.loginCon {
			display: flex;
			font-size: 25rpx;
			margin-bottom: 40rpx;
			justify-content: space-between;
			color: #1989FA;
		}
	}
  
  ::v-deep .is-input-border {
    border: none;
    border-radius: 0px !important;
    border-bottom: 1px solid red;
  }
</style>